<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DMS-文档管理系统</title>
<!-- botostrap -->
<link rel="stylesheet" type="text/css"
	th:href="@{/assets/components/bootstrap-3.3.7/css/bootstrap.min.css}" />
<!-- botostrap fileinput -->
<link rel="stylesheet" type="text/css"
	th:href="@{/assets/components/bootstrap-fileinput/css/fileinput.min.css}" />
<!-- JQUERY -->
<script type="text/javascript"
	th:src="@{/assets/js/jquery.min.js}"></script>
<!-- botostrap -->
<script type="text/javascript"
	th:src="@{/assets/components/bootstrap-3.3.7/js/bootstrap.min.js}"></script>
<!-- botostrap fileinput -->
<script type="text/javascript"
	th:src="@{/assets/components/bootstrap-fileinput/js/fileinput.min.js}"></script>
<script type="text/javascript"
	th:src="@{/assets/components/bootstrap-fileinput/js/locales/zh.js}"></script>
<script type="text/javascript"
	th:src="@{/assets/components/bootstrap-fileinput/themes/fa/theme.min.js}"></script>
</head>
<script type="text/javascript"
	th:src="@{/my/js/commons.js}"></script>
</head>
<script th:inline="javascript" type="text/javascript">
$(function(){
	var uploadUrl=/*[[@{/upload}]]*/;
	$('#imageupload').fileinput({
	});
	$('#imageupload1').fileinput({
          uploadUrl:uploadUrl, //上传的地址
          allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
         //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
          uploadAsync: true, //默认异步上传
          showUpload:true, //是否显示上传按钮
          showRemove :true, //显示移除按钮
          showPreview :true, //是否显示预览
          showCaption:false,//是否显示标题
          browseClass:"btn btn-primary", //按钮样式    
          dropZoneEnabled: false,//是否显示拖拽区域
         //minImageWidth: 50, //图片的最小宽度
         //minImageHeight: 50,//图片的最小高度
         //maxImageWidth: 1000,//图片的最大宽度
         //maxImageHeight: 1000,//图片的最大高度
          //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
         //minFileCount: 0,
          maxFileCount:10, //表示允许同时上传的最大文件个数
          enctype:'multipart/form-data',
          validateInitialCount:true,
          previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>"
	});
	var fileinputConfig={
	        showCaption: true,//是否显示文件标题。默认为true
	        showBrowse: true,//是否显示文件浏览按钮。默认为true
	        showPreview: true,//是否显示文件预览。默认为true
	        showRemove: true,//是否显示文件删除/清除按钮。默认为true
	        showUpload: true,//
	        showCancel: true,//是否显示文件上传取消按钮。默认为true
	        showClose: true,//是否在预览中显示关闭图标。默认为true
	        showUploadedThumbs: true,//直到按下删除/清除按钮，是否在预览窗口中持续显示上传的文件缩略图（对于ajax上传）。默认为true
	        browseOnZoneClick: false,//是否启用文件浏览/选择预览区的点击。默认为false。
	        autoReplace: false,//在maxFileCount达到限制后是否自动替换预览中的文件，并选择一组新的文件
	        autoOrientImage: true, //是否根据EXIF方向标记（即旋转或水平/垂直镜像翻转）自动定位图像进行显示，默认为true
	        required: false,//是否必传，默认为false
	        rtl: false,//是否以右至左（RTL）模式定位窗口小部件,默认为false
	        hideThumbnailContent: false,//是否隐藏缩略图内的预览内容（图像，pdf内容，文本内容等）。默认为false
	        generateFileId: null,
	        previewClass: '',
	        captionClass: '',//附加到标题容器的任何附加CSS类。
	        frameClass: 'krajee-default',//CSS类另外应用于每个文件缩略图框架。默认为krajee-default。
	        mainClass: 'file-caption-main',//附加到主插件容器的任何附加CSS类，该容器将显示标题以及浏览，删除和上传按钮
	        mainTemplate: null,
	        purifyHtml: true,//是否纯化在预览中为HTML内容类型显示的HTML内容。默认为true。
	        fileSizeGetter: null,//根据bytes参数生成人性化文件大小的回调函数。
	        initialCaption: '',
	        initialPreview: [],//字符串| 排列要显示的初始预览内容。
	        initialPreviewDelimiter: '*$$*',//用于将初始预览内容分割为单个文件缩略图的分隔符
	        initialPreviewAsData: false,//是否将初始预览内容集解析为数据而不是原始标记。默认false
	        initialPreviewFileType: 'image',//字符串，这是在键中配置的文件模板类型之一previewSettings
	        initialPreviewConfig: [],//数组，用于为每个initialPreview项目设置重要属性的配置（设置为其一部分initialPreview）
	        initialPreviewThumbTags: [],//previewThumbTags专门用于初始预览内容的扩展- 但将被配置为对应于每个初始预览缩略图的对象数组。
	        previewThumbTags: {},//缩略图模板中使用的标记列表，缩略图模板将在缩略图标记中动态替换。
	        initialPreviewShowDelete: true,//是否将为每个已经创建的缩略图显示删除按钮initialPreview。
	        initialPreviewDownloadUrl: '',
	        removeFromPreviewOnError: false,//是否应该从错误预览中删除文件缩略图。默认为false。
	        deleteUrl: '',//删除URL
	        deleteExtraData: {},//删除参数
	        overwriteInitial: true,//是否要覆盖最初的预览内容和标题设置。
	        previewZoomButtonIcons: {
	            prev: '<i class="glyphicon glyphicon-triangle-left"></i>',
	            next: '<i class="glyphicon glyphicon-triangle-right"></i>',
	            toggleheader: '<i class="glyphicon glyphicon-resize-vertical"></i>',
	            fullscreen: '<i class="glyphicon glyphicon-fullscreen"></i>',
	            borderless: '<i class="glyphicon glyphicon-resize-full"></i>',
	            close: '<i class="glyphicon glyphicon-remove"></i>'
	        },
	        previewZoomButtonClasses: {
	            prev: 'btn btn-navigate',
	            next: 'btn btn-navigate',
	            toggleheader: 'btn btn-kv btn-default btn-outline-secondary',
	            fullscreen: 'btn btn-kv btn-default btn-outline-secondary',
	            borderless: 'btn btn-kv btn-default btn-outline-secondary',
	            close: 'btn btn-kv btn-default btn-outline-secondary'
	        },
	        preferIconicPreview: false,
	        preferIconicZoomPreview: false,
	        allowedPreviewTypes: undefined,
	        allowedPreviewMimeTypes: null,
	        allowedFileTypes: null,
	        allowedFileExtensions: null,
	        defaultPreviewContent: null,
	        customLayoutTags: {},
	        customPreviewTags: {},
	        previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
	        previewFileIconClass: 'file-other-icon',
	        previewFileIconSettings: {},
	        previewFileExtSettings: {},
	        buttonLabelClass: 'hidden-xs',
	        browseIcon: '<i class="glyphicon glyphicon-folder-open"></i>&nbsp;',
	        browseClass: 'btn btn-primary',
	        removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
	        removeClass: 'btn btn-default btn-secondary',
	        cancelIcon: '<i class="glyphicon glyphicon-ban-circle"></i>',
	        cancelClass: 'btn btn-default btn-secondary',
	        uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
	        uploadClass: 'btn btn-default btn-secondary',
	        uploadUrl: null,
	        uploadUrlThumb: null,
	        uploadAsync: true,
	        uploadExtraData: {},
	        zoomModalHeight: 480,
	        minImageWidth: null,
	        minImageHeight: null,
	        maxImageWidth: null,
	        maxImageHeight: null,
	        resizeImage: false,
	        resizePreference: 'width',
	        resizeQuality: 0.92,
	        resizeDefaultImageType: 'image/jpeg',
	        resizeIfSizeMoreThan: 0, // in KB
	        minFileSize: 0,
	        maxFileSize: 0,
	        maxFilePreviewSize: 25600, // 25 MB
	        minFileCount: 0,
	        maxFileCount: 0,
	        validateInitialCount: false,
	        msgValidationErrorClass: 'text-danger',
	        msgValidationErrorIcon: '<i class="glyphicon glyphicon-exclamation-sign"></i> ',
	        msgErrorClass: 'file-error-message',
	        progressThumbClass: "progress-bar bg-success progress-bar-success progress-bar-striped active",
	        progressClass: "progress-bar bg-success progress-bar-success progress-bar-striped active",
	        progressCompleteClass: "progress-bar bg-success progress-bar-success",
	        progressErrorClass: "progress-bar bg-danger progress-bar-danger",
	        progressUploadThreshold: 99,
	        previewFileType: 'image',
	        elCaptionContainer: null,
	        elCaptionText: null,
	        elPreviewContainer: null,
	        elPreviewImage: null,
	        elPreviewStatus: null,
	        elErrorContainer: null,
	        //errorCloseButton: $.closeButton('kv-error-close'),
	        slugCallback: null,
	        dropZoneEnabled: true,
	        dropZoneTitleClass: 'file-drop-zone-title',
	        fileActionSettings: {},
	        otherActionButtons: '',
	        textEncoding: 'UTF-8',
	        ajaxSettings: {},
	        ajaxDeleteSettings: {},
	        showAjaxErrorDetails: true,
	        mergeAjaxCallbacks: false,
	        mergeAjaxDeleteCallbacks: false,
	        retryErrorUploads: true
	}
	
});
</script>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<input id="imageupload" type="file" name="filesadas">
				<form>
					<fieldset class="" style="">
					  <div class="form-group">
					    <label for="exampleInputEmail1">Email address</label>
					    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
					  </div>
					  <div class="form-group">
					    <label for="exampleInputPassword1">Password</label>
					    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
					  </div>
					  <div class="form-group">
					    <label for="exampleInputFile">File input</label>
					    <input type="file" id="imageupload1" name="file">
					    <p class="help-block">Example block-level help text here.</p>
					  </div>
					  <div class="checkbox">
					    <label>
					      <input type="checkbox"> Check me out
					    </label>
					  </div>
					  <button type="submit" class="btn btn-default">Submit</button>
					</fieldset>
				</form>
			</div>
		</div>
	</div>
</body>
</html>